<style scoped lang="less">
  .s-search{
    position: relative;
    height: auto;
    padding-bottom: 42px;
    .s-form-label{
      display: inline-block;
      padding-top: 10px;
      margin-right: 10px;
      .s-form-ele{
        width: 150px;
      }
      &.search-btns{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 32px;
        text-align: right;
        background-color: #fff;
        padding-top: 0;
      }
    }
  }
</style>
<template>
  <div class="s-search">
    <div class="s-form-label" v-for="item in searchData" :key="item.id">
      <span>{{item.label}}：</span>
      <Input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.placeholder" class="s-form-ele"></Input>
      <Select v-if="item.type === 'select'" v-model="item.value"  class="s-form-ele">
        <Option v-for="options in item.optionList" :value="options.value" :key="options.value">{{ options.option }}</Option>
      </Select>
      <Select  v-if="item.type === 'select2'" v-model="item.value"  class="s-form-ele">
        <Option v-for="options in item.optionList" :value="options.value" :key="options.value">{{ options.option }}</Option>
      </Select>
      <Select  v-if="item.type === 'select2'" v-model="item.value2"  class="s-form-ele">
        <Option v-for="options in item.optionList2" :value="options.value" :key="options.value">{{ options.option }}</Option>
      </Select>
      <DatePicker v-if="item.type === 'date'" type="date" placeholder="选择时间" style="width: 150px"></DatePicker>
      <DatePicker v-if="item.type === 'daterange'" type="daterange" placement="bottom-end" placeholder="选择时间范围" style="width: 200px"></DatePicker>
      <DatePicker v-if="item.type === 'datetimerange'" type="datetimerange" placeholder="选择时间范围" style="width: 280px"></DatePicker>
    </div>
    <div class="s-form-label search-btns">
      <Button type="primary" icon="ios-search"  class="mr10">搜索</Button>
      <Button type="warning" icon="trash-a" >清空</Button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'sSearch',
  props: ['searchData'],
  methods: {
    handleStart () {
      this.$Modal.info({
        title: 'Bravo',
        content: 'Now, enjoy the convenience of iView.'
      });
    }
  }
}
</script>